<template>
  <div :class="['bg', props.pageType === 'pc' ? 'bg-pc' : 'bg-mobile']">
    <div class="head">{{ rateConfig?.guide || '请您对本次服务进行评价' }}</div>
    <div class="rate-content">
      <el-rate v-model="rate" @change="selectStar()" :disabled="rated" />
      <!-- <div class="text-rate-container" v-if="rateConfig?.rateType == 'text' && rateItems">
        <div
          class="text-rate"
          v-for="item in rateItems"
          :key="item.score"
          @click="selectRate(item)"
        >
          <img :src="getTextRateIcon(item.score)" class="rate-icon" />
          <div class="rate-text" :class="{ selected: selectItem?.score == item.score }">
            {{ item.displayName }}
          </div>
        </div>
      </div>
      <div class="rate-desc" v-if="selectItem">{{ selectItem.description }}</div> -->
      <!-- 标签 -->
      <!-- <div class="tag-container" v-if="itemTags.length > 0">
        <div
          class="tag"
          v-for="tag in itemTags"
          :key="tag"
          :class="{ selected: selectTags.includes(tag) }"
          @click="clickTag(tag)"
        >
          {{ tag }}
        </div>
      </div> -->
    </div>
    <div class="remark">
      <el-input
        v-model="rateContent"
        :autosize="{ minRows: 4, maxRows: 4 }"
        :disabled="rated"
        type="textarea"
        :placeholder="rateConfig?.commentGuide || '请留下您的宝贵意见，帮助我们为您提供更好的服务'"
        maxlength="200"
      />
    </div>
    <div class="action-btn" v-if="!rated">
      <el-button
        :loading="isRating"
        :class="['send-btn', pageType == 'pc' ? 'pc-send-btn' : 'mobile-send-btn']"
        @click="submitRate()"
        >提交评价</el-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup name="RateDialog">
import rateLevel1 from '@/assets/images/rate_level1.webp';
import rateLevel2 from '@/assets/images/rate_level2.webp';
import rateLevel3 from '@/assets/images/rate_level3.webp';
import rateLevel4 from '@/assets/images/rate_level4.webp';
import rateLevel5 from '@/assets/images/rate_level5.webp';
import uniChat from '@/lib';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';

const props = defineProps({
  //页面展示类型  pc  mobile
  pageType: {
    type: String,
    default: 'pc'
  },
  chatSessionId: {
    type: String,
    default: ''
  }
});

import { useAppStore } from '@/stores';
import { ElMessage } from 'element-plus';
const appStore = useAppStore();
let rateConfig: any = appStore.rateConfig;

const rate = ref(0);
const rateContent = ref('');
const selectItem = ref<any>();
const rateItems = ref<any>();
//宽度
const width = ref('335px');
let isShow = false;
//是否正在评价
let isRating = ref(false);
const rated = ref(false);
onMounted(() => {
  setTimeout(() => {
    isShow = true;
  }, 1000);
  // 初始化数据 文本需要排除未勾选的条目
  rateItems.value = rateConfig?.items
    ?.filter((item: any) => {
      return rateConfig.rateType === 'text' ? item.isEnabled == 1 : true;
    })
    .sort((a: any, b: any) => a.score - b.score);

  rateItems.value?.forEach((item: any, index: number) => {
    if (item.isDefault == 0) {
      rate.value = index + 1;
      selectItem.value = item;
    }
  });
  if (props.pageType === 'mobile') width.value = '90%';
});

onBeforeUnmount(() => {
  isShow = false;
});

watch(
  () => props.chatSessionId,
  (val) => {
    uniChat
      .isRate(val)
      .then((res) => {
        if (res) {
          rated.value = true;
          return;
        } else {
          rated.value = false;
        }
      })
      .catch(() => {
        rated.value = false;
      });
  },
  { immediate: true }
);

function getTextRateIcon(score: number) {
  return score === 1
    ? rateLevel1
    : score === 2
      ? rateLevel2
      : score === 3
        ? rateLevel3
        : score === 4
          ? rateLevel4
          : rateLevel5;
}

/**
 * 当前选中的条目 的标签
 */
const itemTags = computed(() => {
  if (selectItem.value == null || !selectItem.value.tags) {
    return [];
  }
  return selectItem.value.tags.split(',');
});

/**
 * 当前选中的标签
 */
const selectTags = ref<string[]>([]);

/**
 * 选择评价
 */
function selectRate(item: any) {
  if (rated.value) {
    return;
  }
  selectItem.value = item;
  selectTags.value.length = 0;
}

/**
 * 选择星星
 */
function selectStar() {
  // 提交评价
  selectItem.value = rateItems.value[rate.value - 1];
  selectTags.value.length = 0;
}

/**
 * 点击标签
 * @param tag 标签
 */
function clickTag(tag: string) {
  if (rated.value) {
    return;
  }
  if (selectTags.value.includes(tag)) {
    selectTags.value.splice(selectTags.value.indexOf(tag), 1);
  } else {
    selectTags.value.push(tag);
  }
}

function submitRate() {
  if (isRating.value) return;
  if (selectItem.value == null) {
    ElMessage({
      type: 'warning',
      message: '请打分！'
    });
    return;
  }
  isRating.value = true;
  const tags = selectTags.value.join(',');
  isRating.value = false;
  rated.value = true;
  emit('submitRate', {
    score: selectItem.value.score,
    scoreDescription: selectItem.value.displayName,
    comment: rateContent.value || '',
    tags,
    chatSessionId: props.chatSessionId
  });
}
const emit = defineEmits(['close', 'submitRate']);

function ratingEnd() {
  isRating.value = false;
}

defineExpose({
  ratingEnd
});
</script>
<style lang="scss" scoped>
.bg {
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid #dee0e3;

  background: white;

  .head {
    color: #333333;
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
  }
}
.bg-mobile {
  width: 300px;
}
.bg-pc {
  width: 440px;
}
.rate-content {
  width: 100%;
  height: fit-content;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .text-rate-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    justify-content: space-between;

    .text-rate {
      min-width: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .rate-icon {
      width: 24px;
      height: 24px;
    }

    .rate-text {
      margin-top: 4px;
      height: 18px;
      color: #333333;
      font-size: 12px;
      line-height: 18px;
      &.selected {
        color: var(--color-main-theme, #2b72fe);
      }
    }
  }
  .rate-desc {
    text-align: center;
    color: #333333;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
  }
  .tag-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    justify-content: space-between;
    .tag {
      width: calc(50% - 10px);
      margin-bottom: 8px;
      height: 36px;
      border-radius: 8px;
      text-align: center;
      line-height: 36px;
      box-sizing: border-box;
      padding: 0 12px;
      font-size: 13px;
      border: 1px solid #dadada;
      background: #ffffff;
      color: #333333;
      cursor: pointer;
      &.selected {
        border: 1px solid var(--color-main-theme, #2b72fe);
        background: #eaf1ff;
        color: var(--color-main-theme, #2b72fe);
      }
    }
  }
}

.action-btn {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .send-btn {
    color: white;
    background-color: var(--color-main-theme, #2b72fe);
  }

  .pc-send-btn {
    width: 60px;
  }

  .mobile-send-btn {
    width: 100%;
  }
}
.action-btn {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;

  .send-btn {
    background-color: white;
    color: var(--color-main-theme, #2b72fe);
    border-color: var(--color-main-theme, #2b72fe);
    font-size: 14px;
  }

  .pc-send-btn {
    width: 86px;
  }

  .mobile-send-btn {
    width: 100%;
  }
}
</style>
